﻿/* Font cho toan trang */
body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
a:link
{
    text-decoration: none;
    color: #004EC1;
}
a:hover
{
	text-decoration: none;
	color: #004EC1;
}
a:active
{
	text-decoration: none;
	color: #004EC1;
}
a:visited
{
	text-decoration: none;
	color: #004EC1;
}
/* Positioning class */
.menubar
{
	position: fixed; top: 0px; left: 0px;
	z-index: 5;
	width: 100%; height: 40px;	
	background-image: url('../WebImages/hdr_mid.jpg');	
	border-bottom: thin solid black;
}
.FixedBackGround
{
	position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
	z-index: 0;	
	background-image: url('../WebImages/fixedBg.jpg');
}
.MainContent
{
	position: absolute; top: 80px; left: 50%; margin-left: -480px;
	z-index: 1;
	width: 660px; 
	background-color: White;
	border: thin solid #666666;
}
.RightContent
{	
	position: absolute; top: 80px; left: 50%; margin-left: 190px;
	z-index: 1;		
	width: 300px;
	background-color: White;
	border: thin solid #666666;
}

/* MenuBar items*/
/* Logo */
.qt_logo
{
	position: absolute; top: 0px; left: 20px;
	width: 150px; height: 100%;
	z-index: 6;
	font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: bolder; color: black;
}
/* Controls button */
.menubar_controlbuttons
{
	position: absolute; top: 0px; right: 20px;
	width: 400px; height: 100%;
	z-index: 6;
}
.menubar_controlbuttons_btn
{
	width: 100px; height: 30px;
	z-index: 6;
	background-color: transparent;
	border-style: none; border-width: 0 0 0 0;
}
.menubar_controlbuttons_btn:hover
{
	width: 100px; height: 30px;
	z-index: 6;
	background-color: #E0E0E0;
	border-style: solid; border-width: thin thin 0 thin; border-color: Silver;
	cursor: pointer;
}
/* Search box */
.menubar_searchbox
{
	position: absolute; top: 5px; left: 200px;
	width: 480px; height: 25px;
	z-index: 6;  
}
.menubar_searchbox_input
{
	position: absolute; top:0px; left:0px;
	width: 300px; height: 25px;
	z-index: 6;
	background-color: White;
	border: thin solid gray;	
}
.menubar_searchbox_borderless_input
{
	width:260px; margin-left: 20px;
	font-size:16px;
	border-width:0;
}
.menubar_searchbox_borderless_input:focus
{
	width:260px; margin-left: 20px;
	font-size:16px;
	outline: none;
}
.menubar_searchbox_button
{
	position: absolute; top: 0px; left: 302px;
	width: 60px; height: 27px;
	z-index: 6;
	background-image: url('../WebImages/search.jpg');
	border-style: solid; border-width: thin thin thin 0; border-color: Gray;
}
.menubar_searchbox_button:hover
{
	position: absolute; top: 0px; left: 302px;
	width: 60px; height: 27px;
	z-index: 6;
	background-image: url('../WebImages/search.jpg');
	border-style: solid; border-width: thin thin thin 0; border-color: Gray;
	cursor:pointer;
}
.menubar_searchbox_linkbutton
{
	position: absolute; top: 5px; left: 364px;
	width: 120px; height: 27px;
	z-index: 6;
}
/* Login panel */
.menubar_loginpanel
{
	position: absolute; top: 5px; right: 20px;
	height: 100%;
	z-index: 6;
}
.font_watermark
{
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #C0C0C0;
}
.font_normal
{
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
}
/* MainContent item */
/* title */
.main_content_hdr
{
	position:relative;
	width: 100%;
	background-color: #F0F0F0;
	border-bottom: thin solid silver;
}
/* Playing pane */
.main_content_mediaplayer
{
	position: relative; margin-left: 5%; margin-top:10px;
	width: 90%; height: 100px;
}
.main_content_statistic
{
	position: relative; margin-left: 5%;
	width: 90%; height: 50px;
	border-bottom: thin solid silver;
}
.main_content_statistic_btngroup
{
	position: absolute; left: 0px; top: 10px;
	height: 40px; width: 560px;
}
.main_content_statistic_viewlike
{
	position: absolute; right: 0px; top: 10px;
	height: 40px; width: 100px;
	text-align: right;
}
.button_modded
{
	width: 80px; height: 30px;
	background-image: url('../WebImages/btn_normal.png');
	border-style: none;
}
.button_modded:hover
{
	width: 80px; height: 30px;
	background-image: url('../WebImages/btn_over.png');
	border-style: none;
	cursor:pointer;
}
.button_modded:active
{
	width: 80px; height: 30px;
	background-image: url('../WebImages/btn_down.png');
	border-style: none;
}
/* User words */
.main_content_description
{
	position: relative; margin-left: 5%;
	width: 90%;
	border-bottom: thin solid silver;
}
.txtbox_as_description
{
	border: 0px none;
}
.txtbox_as_description:focus
{
	border: 0px none;
	outline: none;
}
/* Make comment box */
.main_content_makecomment
{
	position: relative; margin-left: 5%;
	width: 90%; height: 130px;
	border-bottom: thin solid silver;
}
.main_content_makecomment_cmtbox
{
	position: absolute; left: 0px;
	width: 100%; height: 40px;
}
.main_content_makecomment_btnpost
{
	position: absolute; right: 0%; bottom: 5px;
	width: 80px; height: 30px;
}
/* comment content */
.main_content_commentholder
{
	position: relative; margin-left: 5%;
	width: 90%;
}
.main_content_commentholder_cmtrow
{
	position: relative; margin-left: 5%;	
	width: 90%; min-height:90px;
	border-bottom: thin solid silver;
}
.main_content_commentholder_cmtrow:hover
{
	position: relative; margin-left: 5%;	
	width: 90%; min-height:90px;
	background-color: #E0E0E0;
	border-bottom: thin solid silver;
}
.main_content_commentholder_cmtrow_leftimg
{
	position: absolute; top: 10px; left: 0px;
	width: 90px; height: 80px;
}
.main_content_commentholder_cmtrow_midinfo
{	
	position: relative; left: 90px;
	width:441px; min-height:90px;
}
/* Main content */
.main_content_holder
{
	position: relative; margin-left: 5%;
	width: 90%;
}
.main_content_songentry
{
	position: relative; margin-top:10px;	
	width: 100%; min-height: 90px;	
	border-bottom: thin solid silver;
}
.main_content_songentry:hover
{
	position: relative; margin-top:10px;	
	width: 100%; min-height: 90px;
	background-color: #E0E0E0;
	border-bottom: thin solid silver;
}
/* Row content */
.main_content_songentry_leftimg
{
	position: absolute; top: 0px; left: 10px;
	width: 90px; height: 80px;
}
.main_content_songentry_midinfo
{	
	position: relative; left: 90px;
	width:504px; min-height:90px;
}
.main_content_songentry_controls
{	
	position: absolute; bottom: 0px; right: 0px;
	width: 60px;
	background-color: Gray;	
}
.main_content_songentry_statistic
{	
	position: absolute; bottom: 0px; left: 90px;
	font-size: 12px;
}
/* registration form */
.regist_form
{
	position: relative; margin-left: 5%; margin-top:10px;
	width: 90%;
}
/* profile page */
/* user avatar and sharing box */
.main_content_profile_hdr
{
	position:relative;
	width: 100%;
	background-color: #F0F0F0;
	border-bottom: thin solid silver;
}
.main_content_profile_avatar
{
	position: absolute; top: 5px; left: 5px;
	width: 100px; height: 100px;
}
.main_content_profile_midinfo
{	
	position: relative; left: 110px;
	width:552px; min-height:110px;
}
.main_content_profile_username
{
    position:relative; left: 5%;
    width: 90%; height: 15px;
}
.main_content_profile_controlpanel
{
    position:relative;
    width: 90%; min-height: 85px;
}
.main_content_profile_uploadbutton
{
    position:absolute; left:188px; top: 15px;
    width: 120px; height:45px;
}
.button_modded2:hover
{
	background-image: url('../WebImages/btn_over2.png');
	border-style: none;
	cursor:pointer;
}
.button_modded2:active
{
	background-image: url('../WebImages/btn_down2.png');
	border-style: none;
}
.main_content_activity
{
    position: relative; margin-top:10px;	
	width: 100%; min-height: 90px;	
	border-bottom: thin solid silver;
}
.main_content_activity:hover
{
    position: relative; margin-top:10px;	
	width: 100%; min-height: 90px; background-color: #E0E0E0;
	border-bottom: thin solid silver;
}
/* Right content */
.right_content_hdr
{
	position:relative;
	width: 100%;
	background-color: #F0F0F0;
	border-bottom: thin solid silver;
}
.right_content_row
{
	position: relative; margin-left: 5%;	
	width: 90%; height: 70px;	
	background-color: White;
	border-bottom: thin solid silver;
}
.right_content_row:hover
{
	position: relative; margin-left: 5%;	
	width: 90%; height: 70px;
	background-color: #E0E0E0;
	border-bottom: thin solid silver;
	cursor: pointer;
}
/* Row with a song by user */
.AuthorizedSuggestRow
{
	position: relative; margin-left: 5%;	
	width: 90%; height: 70px;
	background-color: White;
	border-bottom: thin solid silver;
}
.AuthorizedSuggestRow:hover
{
	position: relative; margin-left: 5%;	
	width: 90%; height: 70px;
	background-color: #E0E0E0;
	border-bottom: thin solid silver;
}
/* Row Suggest */
.right_content_row_leftimg
{
	position: absolute; top: 0px; left: 0px; margin-top: 10px;
	width: 40px; height: 100%;
}
.right_content_row_midinfo
{	
	position: absolute; top: 0px; left: 40px; right: 0px; margin-top: 10px;
	height: 100%;
}
.right_content_row_rightcontrols
{	
	position: absolute; top: 0px; right: 0px;
	width: 40px;
	background-color: Gray;	
}
.right_content_row_bottomstatistic
{	
	position: absolute; bottom: 0px; left: 40px;
	font-size: 10px;
}
/* hidden content */
.display_none
{ display: none; }
.display_block
{ display: block; }